/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-07-10 12:02:05
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-09-28 13:20:19
 */
import React, {
  useEffect,
  FC,
  ButtonHTMLAttributes,
  AnchorHTMLAttributes,
  useRef,
} from "react";
import classNames from "classnames";
import {
  computeRippleStyles,
  createRipple,
  removeRipple,
} from "@/common/tools/ripple";
import "./button.scss";

export type ButtonSize = "lg" | "sm";
export type ButtonType = "primary" | "default" | "danger" | "link";

interface BaseButtonProps {
  className?: string;
  /**设置 Button 的禁用 */
  disabled?: boolean;
  /**设置 Button 的尺寸 */
  size?: ButtonSize;
  /**设置 Button 的类型 */
  btnType?: ButtonType;
  children: React.ReactNode;
  href?: string;
}
type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLElement>;
type AnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLElement>;
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;
/**
 * 页面中最常用的的按钮元素，适合于完成特定的交互
 * ### 引用方法
 *
 * ~~~js
 * import { Button } from 'vikingship'
 * ~~~
 */
export const Button: FC<ButtonProps> = (props) => {
  const { btnType, className, disabled, size, children, href, ...restProps } =
    props;
  // const ButtonRef = useRef(null);

  // useEffect(() => {
  //   ButtonRef.current.addEventListener("mousedown", createRipple);
  //   document.addEventListener("mouseup", removeRipple);
  //   return () => {
  //     ButtonRef.current.removeEventListener("mousedown", createRipple);
  //     document.removeEventListener("mouseup", removeRipple);
  //   };
  // }, []);

  // btn, btn-lg, btn-primary
  const classes = classNames("btn", className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    disabled: btnType === "link" && disabled,
  });
  if (btnType === "link" && href) {
    return (
      <a
        // ref={ButtonRef}
        className={classes} href={href} {...restProps}>
        {children}
      </a>
    );
  } else {
    return (
      <button
        // ref={ButtonRef}
        className={classes}
        disabled={disabled}
        {...restProps}
      >
        {children}
      </button>
    );
  }
};

Button.defaultProps = {
  disabled: false,
  btnType: "default",
};

export default Button;
